<template>
	<div class="container">
		<Row :style="{ padding: '8px' }">
			<i-Col span="12">
				<Input
					v-model="serarchKeyWord"
					search
					placeholder="输入用户名称进行搜索"
					size="large"
					:style="{ width: '280px', marginRight: '8px' }"
					@on-search="getUserList"
				/>
				<Button type="primary" size="large" @click="getUserList">搜索</Button>
			</i-Col>
			<i-Col span="12">
				<Button class="fr" size="large" @click="modalVisible()">
					新增用户
				</Button>
			</i-Col>
		</Row>

		<Table border :columns="columns2" :data="userList">
			<template slot="actions" slot-scope="{ row }">
				<ButtonGroup>
					<Button ghost type="primary" size="small" @click="modalVisible(row)">
						编辑
					</Button>
					<Button ghost type="error" size="small" @click="remove(row)">
						删除
					</Button>
				</ButtonGroup>
			</template>
			<template slot="footer">
				<Page
					class="fr"
					:total="pageInfo.count"
					:page-size-opts="pageInfo.pageSizeArr"
					:current="pageInfo.page"
					:page-size="pageInfo.defaultPageSize"
					show-sizer
					show-total
					@on-change="pageChange"
					@on-page-size-change="pageSizeChange"
				/>
			</template>
		</Table>
		<UserInfoModal
			v-model="modalInfo.value"
			:userID="modalInfo.userID"
			@submit="getUserList"
		/>
	</div>
</template>
<script>
import UserInfoModal from './components/UserInfoModal.vue'

export default {
	components: { UserInfoModal },
	data() {
		return {
			serarchKeyWord: '',
			modalInfo: {
				value: false,
				userID: null
			},
			userList: [],
			columns2: [
				{
					align: 'center',
					title: 'ID',
					key: 'id',
					width: 60
				},
				{
					title: '邮箱',
					key: 'email'
				},
				{
					title: '联系电话',
					key: 'phone'
				},
				{
					title: '用户名',
					key: 'username'
				},
				{
					title: '权限组名称',
					key: 'permission_group_title'
				},
				{
					title: '角色',
					key: 'role'
				},
				{
					title: '操作',
					width: 120,
					slot: 'actions'
				}
			]
		}
	},
	created() {
		this.getUserList()
	},
	methods: {
		// 获取用户列表数据
		async getUserList() {
			const res = await this.$http.userList(
				this.getQueryParams({ username: this.serarchKeyWord })
			)
			console.log(res)
			this.pageInfo.count = res.counts
			this.userList = res.list
		},
		// 修改页码
		pageChange(newPage) {
			this.pageInfo.page = newPage
			this.getUserList()
		},
		// 修改展示数量
		pageSizeChange(newSize) {
			this.pageInfo.defaultPageSize = newSize
			this.getUserList()
		},
		modalVisible(row) {
			this.modalInfo.value = true
			row ? (this.modalInfo.userID = row.id) : (this.modalInfo.userID = '')
		},
		remove({ id }) {
			this.$Modal.confirm({
				title: '警告',
				content: '你确定要删除吗？',
				onOk: async () => {
					await this.$http.deleteUser(id)
					this.$Message.success('删除成功')
					this.getUserList()
				}
			})
		}
	}
}
</script>
<style lang="less" scoped></style>
